<template>
  <div>        
    <el-table align="center" :data="goodsData" style="width: 100%">
        <el-table-column prop="imgSrc" label="商品图片">
            <template slot-scope="scope">
                <img :src="scope.row.imgSrc" alt="" width="90" height="90"/>
            </template>
        </el-table-column>
        <el-table-column prop="goodName" label="商品名称">
        </el-table-column>
        <el-table-column prop="content" label="商品描述">
        </el-table-column>
        <el-table-column prop="price" label="商品价格">
        </el-table-column>
        <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
                <!-- <el-popconfirm
                    title="确认删除吗？"
                    confirmButtonText='确定'
                    cancelButtonText='取消'
                    trigger="click"
                    @onconfirm="delGood(scope.row)"
                > -->
                <el-button @click="delGood(scope.row)" slot="reference" type="primary">删除</el-button>
                <!-- </el-popconfirm> -->
            </template>
        </el-table-column>
    </el-table>

    <div class="up-wrapper">
        <el-button 
        type="primary" 
        @click="dialogVisible = true"
        class="up-button"
        >
            商品上传
        </el-button>

        <el-dialog
        title="商品上传"
        :visible.sync="dialogVisible"
        width="60%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="图片上传">
                    <el-upload
                        class="avatar-uploader"
                        action=""
                        :show-file-list="false"
                        :http-request="uploadImg"
                    >
                        <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="form.goodName"></el-input>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onsubmit">确 定</el-button>
                    <el-button @click="oncancel">取消</el-button>
                </el-form-item>
            </el-form>
            
        </el-dialog>
    </div>
  </div>
</template>

<script>
import Service from '@/service/request'

export default {
    data() {
        return {
            goodsData: [],  // 数据展示列表
            fileList: [],    // 待上传列表
            dialogVisible: false,
            form: {
                img: '',
                imageUrl: '',
                goodName: '',
                content: '',
                price: '',
            }
        }
    },
    methods: {
        uploadImg (event) {
            const formData = new FormData()
            formData.append('img', event.file)
            Service.uploadImg(formData).then(async res => {
                this.form.imageUrl = res.img
                await this.$store.dispatch('getData')
                this.goodsData = this.$store.state.data
            })
        },
        onsubmit () {
            console.log("event>>>>>>", this.form)
            Service.insertGood(this.form.goodName, this.form.content,
                                this.form.price, this.form.imageUrl)
                                .then(async res => {
                await this.$store.dispatch('getData')
                this.goodsData = this.$store.state.data
            console.log('>>>>>>', 'goodsData', this.goodsData);
            })
            this.dialogVisible = false
        },
        oncancel() {
            this.dialogVisible = false
        },        
        delGood(data) {
            console.log("dataId >>>>", data.id)
            Service.delGood(data.id).then(async res => {
                await this.$store.dispatch('getData')
                this.goodsData = this.$store.state.data
            })
        }
    },
    async created() {
        console.log("GoodsCreated")
        await this.$store.dispatch('getData')
        this.goodsData = this.$store.state.data
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .up-button {
    margin-top: 50px;
  }
</style>